<template>
  <div>
        <h1>热门服务</h1>
    <div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="title">
    <template slot="append"><el-button @click="sou">搜索</el-button></template>
  </el-input>
  <el-button type="danger" @click="issue">发布人才</el-button>
</div>


        <div><span><button @click="paging(1)">全部</button><button @click="paging1(1)">项目</button><button @click="paging2(1)">按时</button></span></div>
   <div class="container">
  <div class="row" >
   <div class="elem" v-for="(i,x) in list" :key="x">
    <h3><span>{{i.type}} </span></h3>
    <span  class="pa">￥{{i.money}}</span><br>
    <span>{{i.title}}</span><br>
    <span>{{i.descs}}</span><br>
    <span><button>我要开店</button><button>购买类似服务</button></span>
   
    </div>

  </div>
 
 </div>

    <el-pagination
      background
  :page-size="page"
  :pager-count="10"
  layout="prev, pager, next"
  :total='tcount'
  @current-change='pages'>
</el-pagination>
  </div>
</template>

<script>
export default {
    data(){
        return{
            page:1,
            page_size:5,
            tcount:0,
            list:[],
            title:''
        }
    },
    methods:{
        paging(page){
            this.page= page
            this.axios.get('/getprojectall?page='+this.page+'&page_size='+this.page_size)
            .then(res=>{
                this.list = res.data.all
                this.tcount = res.data.tcount

            })
        },
        paging1(page){
            this.page= page
            this.axios.get('/getprojectall?page='+this.page+'&page_size='+this.page_size)
            .then(res=>{
                this.list = res.data.prolist
                this.tcount = res.data.tcount

            })
        },
        paging2(page){
            this.page= page
            this.axios.get('/getprojectall?page='+this.page+'&page_size='+this.page_size)
            .then(res=>{
                this.list = res.data.onlist
                this.tcount = res.data.tcount
            })
        },
        pages(p){
            this.paging(p)
        },
        sou(){
            this.axios.get('label_index?title='+this.title)
            .then(res=>{
                this.list = res.data.data
            })

        },
        issue(){
            this.$router.push('issue')
        }
    },
    mounted(){
        this.paging(1)
    }

}
</script>

<style>
  .container{ 
 width:900px; 
  height:auto; 
  margin:auto; 
 } 
 .row{  
 width:900px; 
  height:auto;  
 display: flex; 
  background-color:#ffffff;
} 
 .elem{   
margin-top:20px;  
 margin-right:20px;    
 flex:1;  
 background-color:#EEE; 
  height:200px; 
 }
  .tall-elem{  
 height:500px; 
} 
 .child{ 
  margin:20px 20px 0px 20px; 
  background-color:yellow ; 
  width:calc(100% - 40px); 
  height:100px;  
} 
.pa{
    color: red;
}
 </style>
